<template>
  <div class="light1 borderStyle">
    <el-row class="elRow">
      <el-col :span="12" class="elCol">
        <el-row>
          <el-col :span="24">
            <div class="titleBox">门禁控制器管理</div>
          </el-col>
          <el-col :span="24">
            <div class="contBox">
              <div class="sbzxltjBox">
                <div>
                  <div class="p-left">
                    <span>区域名称:</span>
                    <el-select
                      clearable
                      class="p-left-input"
                      v-model="selectValue"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(ietm, k) in selectOptions"
                        :key="k"
                        :label="ietm.label"
                        :value="ietm.value"
                      ></el-option>
                    </el-select>
                    <span class="span">门禁名称:</span>
                    <el-input></el-input>
                  </div>
                  <div class="p-right">
                    <el-button type="primary">查询</el-button>
                    <el-button type="primary">授权</el-button>
                  </div>
                </div>
              </div>
              <div class="bigTableStyle">
                <!-- 
                  @selection-change="handleSelectionChange"
                -->
                <el-table
                  border
                  :data="tableData"
                  height="95%"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;"
                >
                  <el-table-column type="selection" width="60"></el-table-column>
                  <!-- <el-table-column align="center" type="index" label="序号" width="60"></el-table-column> -->
                  <el-table-column
                    align="center"
                    prop="sblx"
                    label="变电站名称"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="yxzsc"
                    label="区域名称"
                    width="180"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="zxsj"
                    label="门禁名称"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="lxsj"
                    label="当前状态"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column label="控制" min-width="50" :show-overflow-tooltip="true">
                    <span class="infoName xs">开/关</span>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="elCol">
        <el-row>
          <el-col :span="24">
            <div class="titleBox">门禁卡管理</div>
          </el-col>
          <el-col :span="24">
            <div class="contBox">
              <div class="sbzxltjBox">
                <div>
                  <div class="p-left">
                    <span>门禁卡名称:</span>
                    <el-input></el-input>
                    <span class="span">卡号:</span>
                    <el-input></el-input>
                  </div>
                  <div class="p-right">
                    <el-button type="primary">查询</el-button>
                    <el-button type="primary">授权</el-button>
                  </div>
                </div>
              </div>
              <div class="bigTableStyle" style=" overflow-y: auto; ">
                <!-- 
                  @selection-change="handleSelectionChange"
                -->
                <el-table
                  border
                  :data="tableData"
                  height="95%"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;"
                >
                  <el-table-column type="selection" width="60"></el-table-column>
                  <!-- <el-table-column align="center" type="index" label="序号" width="60"></el-table-column> -->
                  <el-table-column
                    align="center"
                    prop="sblx"
                    label="变电站名称"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="zxsj"
                    label="门禁卡名称"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="lxsj"
                    label="卡号"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column label="已授权门禁" min-width="80" :show-overflow-tooltip="true">
                    <span class="infoName xs" @click="obserVation">查看</span>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="elCol">
        <el-row>
          <el-col :span="24">
            <div class="titleBox">远程授权</div>
          </el-col>
          <el-col :span="24">
            <div class="contBox ycsqBox">
              <div>
                <div>
                  <div>已选择门禁控制器</div>
                  <div>
                    <ul>
                      <li class="xs" v-for=" i in 15" :key="i">
                        <span class="el-icon-close"></span>
                        {{i+'测试测试'}}
                      </li>
                    </ul>
                  </div>
                </div>
                <div>
                  <div>关联人员</div>

                  <div>
                    <el-tree
                      :data="treeData"
                      icon-class="el-icon-caret-bottom"
                      :props="defaultProps"
                      ref="tree"
                      @node-click="handleNodeClick"
                    >
                      <div slot-scope="{ node }">
                        <span class="el-icon-folder-opened"></span>
                        <span class="ioc">{{ node.label }}</span>
                      </div>
                    </el-tree>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <div>已选择门禁卡</div>
                  <div style="overflow-y: auto;">
                    <ul>
                      <li v-for=" i in 15" :key="i" class="xs">
                        <span class="el-icon-close"></span>
                        {{i+'测试测试'}}
                      </li>
                    </ul>
                  </div>
                </div>
                <div>
                  <div>设置授权时间</div>
                  <div>
                    <!-- prefix-icon="" 自定义图标 -->
                    <el-date-picker class="dateditor" v-model="value1"></el-date-picker>
                    <span>——</span>
                    <el-date-picker class="dateditor" v-model="value2"></el-date-picker>

                    <p>
                      <el-button type="primary">确实</el-button>
                      <el-button type="primary" @click=" value1 = value2 = '' ">清空</el-button>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="elCol">
        <el-row>
          <el-col :span="24">
            <div class="titleBox">门禁记录</div>
          </el-col>
          <el-col :span="24">
            <div class="contBox">
              <div class="sbzxltjBox">
                <div class="W-left">
                  <div class="p-left">
                    <span>开锁人:</span>
                    <el-input></el-input>
                    <span class="span">开锁时间:</span>
                    <el-date-picker class="dateditor" v-model="value1"></el-date-picker>
                    <span class="span">至</span>
                    <el-date-picker class="dateditor" v-model="value2"></el-date-picker>
                  </div>
                  <div class="p-right">
                    <el-button type="primary">查询</el-button>
                  </div>
                  <!-- <el-button type="primary">按日</el-button>
                  <el-button type="primary">查询</el-button>
                  <el-button type="primary">授权</el-button>-->
                </div>
              </div>
              <div class="bigTableStyle">
                <!-- 
                  @selection-change="handleSelectionChange"
                -->
                <el-table
                  border
                  :data="tableData"
                  height="95%"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;"
                >
                  <el-table-column type="selection" width="60"></el-table-column>
                  <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                  <el-table-column
                    align="center"
                    prop="sblx"
                    label="变电站名称"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="yxzsc"
                    label="区域名称"
                    width="180"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="zxsj"
                    label="门禁名称"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="lxsj"
                    label="当前状态"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="zxl"
                    label="控制"
                    min-width="50"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 已授权门禁弹窗 -->
    <el-dialog
      title="已授权门禁查看"
      :visible.sync="obserVstatus"
      width="50%"
      :before-close="handleClose"
      :show-close="!true"
    >
      <Theobser :obsertData="obsertData"></Theobser>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Tree } from "element-ui";

import Theobser from "./Theobser.vue";
// interface dataType {
//   label: string;
//   children?: object | string;
// }
@Component({
  components: { Theobser },
})
export default class extends Vue {
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }): string {
    return rowIndex % 2 === 0 ? "row1" : "row2";
  }
  $refs!: {
    tree: Tree;
  };
  //表格数据
  tableData = [
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试2",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
  ];

  defaultProps = {
    children: "childer",
    label: "name",
  };

  treeData: Array<any> = [
    {
      name: "一级",
      childer: [
        {
          name: "一级-01",
          childer: [
            {
              name: "一级-02",
            },
          ],
        },
      ],
    },
    {
      name: "二级",
      childer: [
        {
          name: "二级-01",
          childer: [
            {
              name: "二级-02",
            },
          ],
        },
      ],
    },
  ];

  handleNodeClick(data) {
    console.log(data);
  }

  value1: any = "";
  value2: any = "";

  // 路由传参

  @Watch("$route", { immediate: true })
  public onRouteChange(to) {
    console.log("路由变化了", to);
  }

  // 门襟状态
  obserVstatus: boolean = false;
  obsertData: Array<any> = [
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试2",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
  ];
  // 查看事件
  obserVation() {
    this.obserVstatus = true;
  }

  // 弹框关闭前的回调
  handleClose() {
    // this.obsertData = [];
    this.obserVstatus = false;
    console.log("弹框关闭前的回调");
  }

  selectValue: String = "";
  selectOptions: any = [{ value: "01", label: "内蒙" }];
}
</script>

<style lang="scss" scoped>
.p-left {
  width: 70%;
  line-height: 0.55rem;
  float: left;
  .span {
    margin-left: 0.1rem;
  }
  .el-select {
    width: 155px;
    margin-right: 0.1rem;
  }
}
// .p-left-input {
//   .el-input {
//     width: 100%;
//     margin-left: 0.1rem;
//   }
// }
.p-right {
  width: 30%;
  float: right;
  padding-top: 0.11rem;

  .el-button {
    float: left;
  }
}
.W-left {
  .p-left {
    width: 80%;
  }
  .p-right {
    padding-left: 10px;
    width: 20%;
  }
  .dateditor {
    width: 1.5rem;
  }
}
.ycsqBox {
  > div:nth-child(1) {
    height: 50%;
    display: flex;
    > div:nth-child(1) {
      flex: 1.3;
      height: 100%;

      > div:nth-child(1) {
        height: 15%;
        padding-top: 0.04rem;
        text-align: center;
        border-bottom: 1px solid #ccc;
      }
      > div:nth-child(2) {
        height: 85%;
        overflow-y: auto;
        ul {
          padding: 0.1rem;
          li {
            width: 100%;
            margin: 0 0 0.1rem 0;
            .el-icon-close {
              color: red;
              font-weight: 700;
            }
          }
        }
      }
    }
    > div:nth-child(2) {
      flex: 2;
      height: 100%;
      overflow-y: auto;

      > div:nth-child(1) {
        height: 15%;
        padding-top: 0.04rem;
        text-align: center;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
      }
      > div:nth-child(2) {
        height: 85%;
        border-left: 1px solid #ccc;
        // background-color: red;
        overflow-y: auto;

        .el-icon-folder-opened,
        .el-tree-node__expand-icon .el-icon-caret-bottom {
          color: rgb(5, 149, 206);
          display: inline-block;
        }
        .ioc {
          display: inline-block;
          margin-left: 0.1rem;
          color: #fff;
        }
      }
    }
  }
  > div:nth-child(2) {
    height: 50%;
    display: flex;
    > div:nth-child(1) {
      flex: 1.3;
      height: 100%;
      > div:nth-child(1) {
        height: 15%;
        padding-top: 0.04rem;
        text-align: center;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
      }
      > div:nth-child(2) {
        height: 85%;
        ul {
          padding: 0.1rem;
          li {
            width: 100%;
            margin: 0 0 0.1rem 0;
            .el-icon-close {
              color: red;
              font-weight: 700;
            }
          }
        }
      }
    }
    > div:nth-child(2) {
      flex: 2;
      height: 100%;
      > div:nth-child(1) {
        height: 15%;
        padding-top: 0.04rem;
        text-align: center;
        border: 1px solid #ccc;
        border-right: none;
        // border-top: none;
      }
      > div:nth-child(2) {
        height: 85%;
        border-left: 1px solid #ccc;
        padding-left: 10%;
        padding-top: 5%;
        span {
          display: inline-block;
          margin: 0 0.1rem;
        }
        p {
          margin-top: 0.3rem;
          padding-right: 0.2rem;
          display: flex;
          justify-content: flex-end;
        }
        .dateditor {
          width: 150px;
        }
      }
    }
  }
}
.sbzxltjBox {
  overflow: hidden;
  height: 15%;
  display: flex;
  justify-content: left;
  align-items: center;
  > div:nth-child(1) {
    display: flex;
    width: 100%;
    height: 100%;
    padding-left: 0.4rem;
    > .el-button:nth-child(6) {
      margin-left: 8.5rem;
    }
  }
}
.light1 {
  margin-top: 0.4rem;
  margin-left: 0.2rem;
  width: 99% !important;
  height: calc(100% - 0.4rem) !important;
  .elRow {
    height: 100%;
    .elCol {
      height: 50%;
      overflow: hidden;
      .el-row {
        height: 100%;
        > .el-col:nth-child(1) {
          height: 8%;
          > div:nth-child(1) {
            height: 100%;
            padding-top: 0.05rem;
            text-align: center;
            border: 1px solid #ccc;
          }
        }
        > .el-col:nth-child(2) {
          height: 92.1%;
          > div:nth-child(1) {
            height: 100%;
            border: 1px solid #ccc;
          }
        }
      }
    }
  }
}
</style>

<style>
.light1 .el-dialog__title {
  background: none !important;
}
.light1 .el-dialog__body {
  padding: 5px 20px !important;
}
.bigTableStyle {
  height: 3.35rem;
  overflow-y: auto !important;
}
.light1 .el-input {
  width: 30%;
  margin-left: 0.1rem;
}

.p-left-input .el-input {
  width: 100% !important;
  margin-right: 0.1rem;
}
</style>
